<template>
    <h1>事件修饰符</h1>
    <div>事件修饰符用于对事件的处理，如阻止默认事件，阻止事件冒泡等，这些方法原本都可以使用原生的事件对象进行实现，但使用 vue 提供的方法将更简便。</div>
    <div>有关更多的事件修饰符，请参考官网网站，这里只介绍两种：<strong>阻止默认事件，和阻止事件冒泡</strong></div>
    <hr>

    <h2>阻止默认事件</h2>
    <hr>

    <div>使用 @click.prevent 阻止默认事件</div>
    <a @click.prevent="baiduclick()" href="https::www.baidu.com">百度一下</a>

    <h2>阻止事件冒泡</h2>
    <hr>

    <div @click="parente()">
        <p @click.stop="sone()">（点这一行，看控制台）<strong>事件冒泡</strong>：当点击子元素时，如果父元素也有点击事件，则在触发子元素事件后，也会冒泡触发父元素的事件</p>
    </div>

    <div>只需在子元素上使用 @click.stop 即可阻止事件冒泡，只触发子元素事件，不再冒泡向上传递</div>

</template>

<script>
export default {
    data() {
        return {
            quote: ["路漫漫其修远兮，吾将上下而求索。", "看惯了长夜，仍然要向往天明。", "有些景色必须前进才能看到，那么只有勇往直前。"]
        }
    },
    methods: {
        baiduclick() { },
        parente() {
            console.log("父元素打印");
        },
        sone() {
            console.log("子元素打印");
        }
    }
}
</script>